<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>China Airline</title>
    <link rel="stylesheet" media="all" type="text/css" href="style_china.css" />
    <script src="js/philogl/PhiloGL.js"></script>
    <script src="js/classes_china.js"></script>
    <script src="js/airline_china.js"></script>
</head>
<body>
    <div id="log-panel" style="display:none;">
        <span id="log-message"></span>
    </div>

    <div id="fallback" class="fallback"></div>

    <div id="container">
        <div id="title">
            <h1>China Airline</h1>
            <div class="description">China City's Airline Route</div>
        </div>

        <div class="canvas-container">
            <div id="canvas-wrapper">
                <canvas id="map-canvas" width="1024" height="1024"></canvas>
            </div>
            <div id="list-wrapper" class="list-wrapper" style="display:none;">
                <input type="text" id="search" placeholder="Search for an City" />
                <ul id="selected-cities">
                </ul>
                <div class="list-container">
                    <ul id="city-list"></ul>
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    </div>


    <div class="footer">
        Authors: WSF
    </div>

    <div class="tooltip hide" id="tooltip" style="width:auto;"></div>

    <script>
        if (!PhiloGL.hasWebGL()) {
            document.body.className = 'no-webgl';
            document.getElementById('fallback').innerHTML = ''
                    +  '<div style="margin:10px;">'
                    +   'Your browser (or hardware) does not support WebGL. Go <a href="http://get.webgl.org">here</a> to find more information.'
                    +  '</div>'
                    +   '<iframe width="853" height="510" src="http://www.youtube.com/embed/b263ETg5zqI" frameborder="0" allowfullscreen></iframe>';
        }
    </script>
</body>
</html>